<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.text-red {
				color: #ff0000;
			}
			/*测试*/
			
			.test-img img {
				width: 100px;
				height: 100px;
			}
			
			.test-grid {
				height: 100px;
				margin-bottom: 150px;
			}
			/*布局*/
			/*左边固定列表*/
			
			.main-sidebar {
				position: fixed;
				top: 0;
				left: 0;
				margin-top: 50px;
				min-height: 100%;
				width: 230px;
				z-index: 2;
			}
			
			.sidebar {
				padding-bottom: 10px;
			}
			
			.user-panel {
				position: relative;
				padding: 10px;
				overflow: hidden;
			}
			
			.user-panel:before,
			.user-panel:after {
				content: " ";
				display: table;
			}
			
			.user-panel:after {
				clear: both;
			}
			
			.user-panel>.image>img {
				width: 100%;
				max-width: 45px;
				height: auto;
			}
			
			.user-panel>.info {
				padding: 5px 5px 5px 15px;
				line-height: 1;
				position: absolute;
				left: 55px;
			}
			
			.user-panel>.info>p {
				font-weight: 600;
				margin-bottom: 9px;
			}
			
			.user-panel>.info>a {
				text-decoration: none;
				padding-right: 5px;
				margin-top: 3px;
				font-size: 11px;
			}
			
			.header-list {
				color: #848484;
				background: #f9fafc;
				overflow: hidden;
				text-overflow: clip;
				padding: 10px 25px 10px 15px;
				font-size: 12px;
			}
			
			.sidebar-form {
				border-radius: 3px;
				border: 1px solid #d2d6de;
				margin: 10px 10px;
			}
			
			.sidebar-form input:focus {
				border-color: transparent;
			}
			
			.sidebar-menu {
				list-style: none;
				margin: 0;
				padding: 0;
			}
			
			.sidebar-menu>li {
				position: relative;
				margin: 0;
				padding: 0;
			}
			
			.sidebar-menu>li>a {
				padding: 12px 5px 12px 15px;
				display: block;
			}
			
			.sidebar-menu>li>a>.fa,
			.sidebar-menu>li>a>.glyphicon,
			.sidebar-menu>li>a>.ion {
				width: 20px;
			}
			
			.sidebar-menu li.header-list {
				padding: 10px 25px 10px 15px;
				font-size: 12px;
			}
			
			.sidebar-menu li>a>.fa-angle-left,
			.sidebar-menu li>a>.pull-right-container>.fa-angle-left {
				width: auto;
				height: auto;
				padding: 0;
				margin-right: 10px;
				-webkit-transition: transform 0.5s ease;
				-o-transition: transform 0.5s ease;
				transition: transform 0.5s ease;
			}
			
			.sidebar-menu li>a>.fa-angle-left {
				position: absolute;
				top: 50%;
				right: 10px;
				margin-top: -8px;
			}
			
			.sidebar-menu .menu-open>a>.fa-angle-left,
			.sidebar-menu .menu-open>a>.pull-right-container>.fa-angle-left {
				-webkit-transform: rotate(-90deg);
				-ms-transform: rotate(-90deg);
				-o-transform: rotate(-90deg);
				transform: rotate(-90deg);
			}
			
			.sidebar-menu .active>.treeview-menu {
				display: block;
			}
			
			.treeview-menu {
				display: none;
				list-style: none;
				padding: 0;
				margin: 0;
				padding-left: 5px;
			}
			/*主体*/
			
			.content-wrapper {
				min-height: 100%;
				background-color: #ecf0f5;
				z-index: 3;
			}
			
			.content {
				min-height: 100%;
				padding: 15px;
				margin-right: auto;
				margin-left: auto;
				padding-left: 15px;
				padding-right: 15px;
			}
			
			.container-fluid {
				padding-right: 15px;
				padding-left: 15px;
				margin-right: auto;
				margin-left: auto;
			}
			
			input{
				margin-bottom: 20px;
			}	
			/*页脚*/
			
			.main-footer {
				background: #fff;
				padding: 15px;
				color: #444;
				border-top: 1px solid #d2d6de;
			}
			
			.content-wrapper,
			.main-footer {
				-webkit-transition: -webkit-transform .3s ease-in-out, margin .3s ease-in-out;
				-moz-transition: -moz-transform .3s ease-in-out, margin .3s ease-in-out;
				-o-transition: -o-transform .3s ease-in-out, margin .3s ease-in-out;
				transition: transform .3s ease-in-out, margin .3s ease-in-out;
				margin-left: 230px;
				z-index: 820;
			}
			/*测试*/
			#main{
				width: 300px;
				height: 200px;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="css/lyq_bootstrap.css" />
	</head>
	<script type="text/javascript" src="js/lyq_jquery.js"></script>

	<body>
		<div class="nav bg-primary"></div>
		<aside class="main-sidebar">
			<section class="sidebar">
				<div class="user-panel">
					<div class="pull-left image">
						<img src="img/lyqlogo.jpg" class="img-circle" alt="头像">
					</div>
					<div class="pull-left info">
						<p>大前端未来酱</p>
						<a href="#"><i class="fa fa-circle text-success"></i>我的主页</a>
					</div>
				</div>
				<form action="#" method="get" class="sidebar-form">
					<div class="input-group">
						<input type="text" name="q" class="form-control" placeholder="Search...">
						<!--<span class="input-group-btn">
	              <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
	              </button>
	            </span>-->
					</div>
				</form>
				<ul class="sidebar-menu">
					<li class="header-list">页头</li>
					<li class="active">
						<a href="#"><i class="fa fa-link"></i> <span>主体</span></a>
					</li>
					<li>
						<a href="#"><i class="fa fa-link"></i> <span>其他链接</span></a>
					</li>
					<li class="treeview">
						<a href="#"><i class="fa fa-link"></i> <span>阿哈</span>
							<span class="pull-right-container">
			              	  <i class="fa fa-angle-left pull-right"></i>
			              	</span>
						</a>
						<ul class="treeview-menu">
							<li>
								<a href="#">二级链接</a>
							</li>
							<li>
								<a href="#">二级链接</a>
							</li>
						</ul>
					</li>
				</ul>
			</section>
		</aside>
		<div class="content-wrapper">
			<section class="content container-fluid">
				<button class="btn-lg" onclick="test()">测试</button>
				<div id="main" class="bg-info">
					<p class="text-center bg-danger" style="width: 200px;height: 100px;">测试的文字</p>
				</div>
				
				<!--主体-->
				<h1>这是h1标签</h1>
				<h2>这是h2标签</h2>
				<h3>这是h3标签</h3>
				<h4>这是h4标签</h4>
				<h5>这是h5标签</h5>
				<h6>这是h6标签</h6>
				<!--<pre>
					<h1>这是h1标签</h1>
					<h2>这是h2标签</h2>
					<h3>这是h3标签</h3>
					<h4>这是h4标签</h4>
					<h5>这是h5标签</h5>
					<h6>这是h6标签</h6>
				</pre>-->
				<button class="btn">这是初始按钮</button>
				<button class="btn btn-default">这是default按钮</button>
				<button class="btn btn-danger">这是danger按钮</button>
				<button class="btn btn-primary">这是primary按钮</button>
				<button class="btn btn-warning">这是warning按钮</button>
				<button class="btn btn-info">这是info按钮</button>
				<button class="btn btn-link">这是link按钮</button>

				<button class="btn btn-xs">这是小按钮</button>
				<button class="btn btn-sm">这是中按钮</button>
				<button class="btn btn-lg">这是大按钮</button>

				<p class="text-left">我是左对齐</p>
				<p class="text-center">我是居中对齐</p>
				<p class="text-right">我是右对齐</p>
				<p class="text-justify">我是justify对齐</p>
				<p class="center-block">我是块居中</p>

				<h1>情景色</h1>
				<p class="bg-info">我是情景色</p>
				<p class="bg-danger">我是情景色</p>
				<p class="bg-primary">我是情景色</p>
				<p class="bg-success">我是情景色</p>
				<p class="bg-warning">我是情景色</p>

				<h1>表格</h1>
				<table class="table">
					<caption class="text-center">哼，我可是有颜色的表格</caption>
					<tr class="bg-danger">
						<td>列</td>
						<td>列</td>
						<td>列</td>
						<td>列</td>
					</tr>
					<tr class="bg-warning">
						<td>列</td>
						<td>列</td>
						<td>列</td>
						<td>列</td>
					</tr>
					<tr class="bg-success">
						<td>列</td>
						<td>列</td>
						<td>列</td>
						<td>列</td>
					</tr>
				</table>
				<table class="table table-hover">
					<caption class="text-center">我是鼠标悬停表格</caption>
					<tr>
						<td>列</td>
						<td>列</td>
						<td>列</td>
						<td>列</td>
					</tr>
					<tr>
						<td>列</td>
						<td>列</td>
						<td>列</td>
						<td>列</td>
					</tr>
					<tr>
						<td>列</td>
						<td>列</td>
						<td>列</td>
						<td>列</td>
					</tr>
				</table>
				<table class="table table-bordered">
					<caption class="text-center">我是有边框表格</caption>
					<tr>
						<td>列</td>
						<td>列</td>
						<td>列</td>
						<td>列</td>
					</tr>
					<tr>
						<td>列</td>
						<td>列</td>
						<td>列</td>
						<td>列</td>
					</tr>
					<tr>
						<td>列</td>
						<td>列</td>
						<td>列</td>
						<td>列</td>
					</tr>
				</table>
				<table class="table table-responsive">
					<caption class="text-center">我是响应式表格</caption>
					<tr>
						<td>列</td>
						<td>列</td>
						<td>列</td>
						<td>列</td>
					</tr>
					<tr>
						<td>列</td>
						<td>列</td>
						<td>列</td>
						<td>列</td>
					</tr>
					<tr>
						<td>列</td>
						<td>列</td>
						<td>列</td>
						<td>列</td>
					</tr>
				</table>
				<table class="table table-condensed">
					<caption class="text-center">我是紧缩性表格</caption>
					<tr>
						<td>列</td>
						<td>列</td>
						<td>列</td>
						<td>列</td>
					</tr>
					<tr>
						<td>列</td>
						<td>列</td>
						<td>列</td>
						<td>列</td>
					</tr>
					<tr>
						<td>列</td>
						<td>列</td>
						<td>列</td>
						<td>列</td>
					</tr>
				</table>
				<h1>图片</h1>
				<div class="test-img">
					<img src="img/lyqlogo.jpg" class="img-circle" />
					<img src="img/lyqlogo.jpg" class="img-thumbnail" />
					<img src="img/lyqlogo.jpg" class="img-rounded" />

					<img src="img/lyqlogo.jpg" class="image" />
					<img src="img/lyqlogo.jpg" class="img-responsive" />
				</div>
				<h1>栅格布局</h1>
				<table class="table table-bordered table-striped">
					<thead>
						<tr>
							<th></th>
							<th>
								超小屏幕
								<small>手机 (&lt;768px)</small>
							</th>
							<th>
								小屏幕
								<small>平板 (≥768px)</small>
							</th>
							<th>
								中等屏幕
								<small>桌面显示器 (≥992px)</small>
							</th>
							<th>
								大屏幕
								<small>大桌面显示器 (≥1200px)</small>
							</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th class="text-nowrap" scope="row">栅格系统行为</th>
							<td>总是水平排列</td>
							<td colspan="3">开始是堆叠在一起的，当大于这些阈值时将变为水平排列C</td>
						</tr>
						<tr>
							<th class="text-nowrap" scope="row"><code>.container</code> 最大宽度</th>
							<td>None （自动）</td>
							<td>750px</td>
							<td>970px</td>
							<td>1170px</td>
						</tr>
						<tr>
							<th class="text-nowrap" scope="row">类前缀</th>
							<td><code>.col-xs-</code></td>
							<td><code>.col-sm-</code></td>
							<td><code>.col-md-</code></td>
							<td><code>.col-lg-</code></td>
						</tr>
						<tr>
							<th class="text-nowrap" scope="row">列（column）数</th>
							<td colspan="4">12</td>
						</tr>
						<tr>
							<th class="text-nowrap" scope="row">最大列（column）宽</th>
							<td class="text-muted">自动</td>
							<td>~62px</td>
							<td>~81px</td>
							<td>~97px</td>
						</tr>
						<tr>
							<th class="text-nowrap" scope="row">槽（gutter）宽</th>
							<td colspan="4">30px （每列左右均有 15px）</td>
						</tr>
						<tr>
							<th class="text-nowrap" scope="row">可嵌套</th>
							<td colspan="4">是</td>
						</tr>
						<tr>
							<th class="text-nowrap" scope="row">偏移（Offsets）</th>
							<td colspan="4">是</td>
						</tr>
						<tr>
							<th class="text-nowrap" scope="row">列排序</th>
							<td colspan="4">是</td>
						</tr>
					</tbody>
				</table>
				<div class="test-grid show-grid">
					<div class="col-md-1">.col-md-1</div>
					<div class="col-md-1">.col-md-1</div>
					<div class="col-md-1">.col-md-1</div>
					<div class="col-md-1">.col-md-1</div>
					<div class="col-md-1">.col-md-1</div>
					<div class="col-md-1">.col-md-1</div>
					<div class="col-md-1">.col-md-1</div>
					<div class="col-md-1">.col-md-1</div>
					<div class="col-md-1">.col-md-1</div>
					<div class="col-md-1">.col-md-1</div>
					<div class="col-md-1">.col-md-1</div>
					<div class="col-md-1">.col-md-1</div>
				</div>

				<div class="test-grid show-grid">
					<div class="col-md-8">.col-md-8</div>
					<div class="col-md-4">.col-md-4</div>
				</div>
				<div class="test-grid show-grid">
					<div class="col-md-4">.col-md-4</div>
					<div class="col-md-4">.col-md-4</div>
					<div class="col-md-4">.col-md-4</div>
				</div>
				<div class="test-grid show-grid">
					<div class="col-md-6">.col-md-6</div>
					<div class="col-md-6">.col-md-6</div>
				</div>
				<figure class="highlight">
					<pre>
						<code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
							<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
							<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
							<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
							<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
							<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
							<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
							<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
							<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
							<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
							<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
							<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
							<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
							<span class="nt">&lt;/div&gt;</span>
							<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
							<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-8"</span><span class="nt">&gt;</span>.col-md-8<span class="nt">&lt;/div&gt;</span>
							<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>.col-md-4<span class="nt">&lt;/div&gt;</span>
							<span class="nt">&lt;/div&gt;</span>
							<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
							<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>.col-md-4<span class="nt">&lt;/div&gt;</span>
							<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>.col-md-4<span class="nt">&lt;/div&gt;</span>
							<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>.col-md-4<span class="nt">&lt;/div&gt;</span>
							<span class="nt">&lt;/div&gt;</span>
							<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
							<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>.col-md-6<span class="nt">&lt;/div&gt;</span>
							<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>.col-md-6<span class="nt">&lt;/div&gt;</span>
							<span class="nt">&lt;/div&gt;</span>
						</code>
					</pre>
				</figure>
				<h1>流式布局</h1>
				<h2>将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。</h2>
				<figure class="highlight">
					<pre>
						<code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">&gt;</span>
							<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
							  ...
							<span class="nt">&lt;/div&gt;</span>
							<span class="nt">&lt;/div&gt;</span>
						</code>
					</pre>
				</figure>
				<h1>栅格布局暂时结束，待优化</h1>
				<h1>表单</h1>
				<input type="text" placeholder="默认表单" class="input-group"/>
				<input type="text" class="form-control" id="" placeholder="">
				<input type="text" class="form-horizontal" placeholder="默认表单"/>
				<input type="text" placeholder="默认表单"/>
				<input type="text" placeholder="默认表单"/>
				<h1>浮动</h1>
				<p class="pull-left">我系左浮动</p>
				<p class="pull-right">我系右浮动</p>
				<p class="clearfix">我系clear: both清除浮动</p>
				<p class="overflow-hidden">我系overflow-hidden清除浮动</p>
				<h1>显示与隐藏</h1>
				<p class="hide">我被隐藏了</p>
				<p class="show">我是显示</p>
				<h1>分页</h1>
				<nav aria-label="Page navigation">
				  	<ul class="pagination">
					    <li>
					      <a href="#" aria-label="Previous">
					        <span aria-hidden="true">&laquo;</span>
					      </a>
					    </li>
					    <li><a href="#">1</a></li>
					    <li><a href="#">2</a></li>
					    <li><a href="#">3</a></li>
					    <li><a href="#">4</a></li>
					    <li><a href="#">5</a></li>
					    <li>
					      <a href="#" aria-label="Next">
					        <span aria-hidden="true">&raquo;</span>
					      </a>
					    </li>
				    </ul>
				</nav>
				<h1>进度条</h1>
				<div class="progress">
				    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
				      <span class="sr-only">60% Complete</span>
				    </div>
				</div>
				<h1>面板</h1>
				<div class="panel panel-default">
				  <div class="panel-heading">Panel heading without title</div>
				  <div class="panel-body">
				    Panel content
				  </div>
				</div>
				
				<div class="panel panel-default">
				  <div class="panel-heading">
				    <h3 class="panel-title">Panel title</h3>
				  </div>
				  <div class="panel-body">
				    Panel content
				  </div>
				</div>
				
				<h1>警告框</h1>
				<div class="alert alert-warning alert-dismissible" role="alert">
				  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				  <strong>Warning!</strong> Better check yourself, you're not looking too good.
				</div>
				<div class="alert alert-success" role="alert">
				  <a href="#" class="alert-link">...</a>
				</div>
				<div class="alert alert-info" role="alert">
				  <a href="#" class="alert-link">...</a>
				</div>
				<div class="alert alert-warning" role="alert">
				  <a href="#" class="alert-link">...</a>
				</div>
				<div class="alert alert-danger" role="alert">
				  <a href="#" class="alert-link">...</a>
				</div>
			</section>
			<!-- /.content -->
		</div>
		<footer class="main-footer">
			<div class="pull-right hide-xs">
				<a href="#">未来酱的框架</a>1.0版本
			</div>
			<strong>Copyright © 2018</strong>
		</footer>
		<!--<div id="main"> 
			<p id="main_p">这是id的p</p>
			<p>我是第二个元素</p>
			<p>我是第三个元素</p>
		</div>
		<p class="center">这是class的p</p>
		<p class="center">这是class的p</p>
		<p>这是元素的p</p>
		<input id="search" type="text"/>
		<button type="button" onclick="test()">点我呀！主银</button>
		<a href="">测试</a>-->
		<script>
			//a.css('color','#00FF00');
			function test() {
				$('#main').toggleClass('animated','fadeInDown');
				//$('#main').addClass('animated','fadeInDown');
				//$('#main').parent().css('color','#00FF00','text-align','center');
				//that = document.getElementById('main');
				//console.log($('#search'));
				//$('#search').html('1234');
				//$('#main').text('1');
				//console.log(util.GenNonDuplicateID());

				//$('#main_p').append('<h1>啊哈</h1>');
				//$('#main').children(1).css('color','#00FF00','text-align','center');
				/*ajax:function(){
					url: 'www.baidu.com/getInfo',
					type :'POST',
					data: {
						name: 'jack',
						age: 18
					},
					dataType: 'json',
					success: function(resp){
					// callback
					},
					error: function(err){
					// error code
					} 
				},*/
				//$('#main').get('http://happymmall.com/product/detail.do?productId=12');
				//$('#main').append('<h1>aaa</h1>');
				//$('#main').prepend('<h1>aaa</h1>');
				//$('#main').html();

				//$('#main').hide();//切换为显示完成
				//$('#main').height();//获取高度成功
				//$('#main').width();//获取宽度成功
			}
			//ajax.post('http://v.juhe.cn/weather/index?format=2&dtype=json&cityname=' + '自贡' + '&key=f6e0cad336b95a0b70d42634359fb74b',a);
			
			/*$("#main").onmouseover(function () {
			     console.log('正在执行移入');
			}).onmouseout(function(){
				console.log('正在执行移出');
			}).onclick(function(){
				console.log('正在执行点击');
			}).ondblclick(function(){
				console.log('正在执行鼠标双击事件');
			}).onmouseup(function(){
				console.log('正在执行鼠标释放');
			});*/
		
			
		</script>
	</body>
</html>